<template>
    <div class='bigBox'>
        <!-- 顶部 -->
        <div class="top">
            <div class="logo-box">
                <img src="../assets/logo.png" alt="" class="logo">
            </div>
            <div class="title">进思教育有限责任公司</div>
            <div class="input-box">
                <input type="text" class='inp'>
                <div class="fdj-box">
                    <img src="../assets/fdj.png" alt="" class="fdj">
                </div>
            </div>
            <div class="xwh">下午好</div>
            <div class="rig">
                <img src="../assets/tr1.png" alt="" class="img1">
                <img src="../assets/tr2.png" alt="" class="img2">
                <img src="../assets/tr3.png" alt="" class="img3">
            </div>
        </div>
        <!-- main -->
        <div class="main">
            <!-- 左侧导航 -->
            <el-row class="tac">
                <el-col :span="2">
                    <el-menu router default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/1xwzx'}">新闻资讯</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="" @click="tab(1)">选项1</el-menu-item>
                            <el-menu-item index="" @click="tab(2)">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/2jrwm'}">加入我们</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="" @click="tab(1)">选项1</el-menu-item>
                            <el-menu-item index="" @click="tab(2)">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/3gwpx'}">官网配置</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    
                    <el-submenu index="4">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/4lcgl'}">历程管理</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/5cpfa'}">产品方案</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="6">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/6hzhb'}">合作伙伴</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/7gywm'}">关于我们</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="8">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span> <router-link :to="{path:'/home/8lbtgl'}">轮播图管理</router-link> </span>
                        </template>
                        <el-menu-item-group style="overflow:hidden;">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    </el-menu>
                </el-col>

                <!-- 路由占位符 -->
                <el-col :span="21" :offset="1">
                    <router-view :activeName='activeName'></router-view>
                </el-col>
            </el-row>
        </div>
        
    </div>
</template>

<script>
import router from '@/router';
  export default {
    data(){
        return{
            activeName:'first'
        }
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      tab(index){
        if(index == 1){
            this.activeName='first'
        }else if(index== 2){
            this.activeName='second'
        }
        // this.index=index
        // console.log(this.index)
      }
    }
  }
</script>

<style scoped lang='scss'>
.bigBox{
    width: 1920px;
    margin: 0 auto;
    .top{
        display: flex;
        height: 60px;
        background: #383F58;
        .logo-box{
            width: 70px;
            height: 25px;
            border-radius: 5px;
            opacity: 1;
            background: #2567FF;
            margin-left: 25px;
            margin-top: 18px;
            .logo{
                margin-top: 4px;
                margin-left: 5px;
            }
        }
        .title{
            margin-left: 10px;
            margin-top: 20px;
            width: 140px;
            height: 20px;
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: bold;
            line-height: normal;
            letter-spacing: 0em;
            font-variation-settings: "opsz" auto;
            color: #FFFFFF;
        }
        .input-box{
            display: flex;
            margin-left: 83px;
            border-radius: 5px;
            opacity: 1;
            background: rgba(255, 255, 255, 0.3);
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin-top: 18px;
            width: 220px;
            height: 25px;
            .inp{
                width: 185px;
                display: inline-block;
                height:15px;
                opacity: 0;
            }
            .fdj-box{
                .fdj{
                    margin: 3px;
                    width: 15px;
                    height: 15px;
                }
            }
        }
        .xwh{
            margin-top: 22px;
            margin-left: 36px;
            font-family: Source Han Sans;
            font-size: 12px;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0em;
            font-variation-settings: "opsz" auto;
            color: #FFFFFF;
        }
        .rig{
            margin-left: 1100px;
            .img1{
                display: inline-block;
                width: 20px;
                height: 20px;
                margin: 0px 20px;
                margin-top: -10px;
            }
            .img2{
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-top: -10px;
            }
            .img3{
                display: inline-block;
                width: 30px;
                height: 30px;
                margin:5px 12px;
            }
        }
    }
    .main{
        // display: flex;
    }
}
</style>